<template>
  <div>
    <el-table
      ref='bomTreeChild'
      :data="oNewData.childs"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'childs'}"
      :height="winSions.h-375"
      v-loading="loading"
      @row-click="onRowClick">
        <!-- <el-table-column
        prop="id"
        label="编码"
        width="150">
      </el-table-column> -->
      <el-table-column
        prop="level"
        label="层级"
        width="150">
         <template slot-scope="scope">
             {{ scope.row.level }}
         </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="编码"
        width="150">
         <template slot-scope="scope">{{ scope.row.material.code }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="200">
        <template slot-scope="scope">{{ scope.row.material.name }}</template>
      </el-table-column>
      <el-table-column
        prop="numerator"
        label="用量:分子"
        align="center">
        <template slot-scope="scope">{{ scope.row.numerator }}</template>
      </el-table-column>
      <el-table-column
        prop="denominator"
        label="用量:分母"
        align="center">
      </el-table-column>
      <el-table-column
        prop="scrapRate"
        label="变动损耗率%">
      </el-table-column>
      <el-table-column
        prop="allowOver"
        label="允许超发"
        align="center">
        <template slot-scope="scope">{{ scope.row.allowOver?'是':'否' }}</template>
      </el-table-column>
      <el-table-column
        prop="minIssueQty"
        label="领料考虑最小发料批量"
        width="100"
        align="center">
        <template slot-scope="scope">{{ scope.row.minIssueQty?'是':'否' }}</template>
      </el-table-column>
      <el-table-column
        prop="effectDate"
        label="生效日期"
        width="100">
      </el-table-column>
      <el-table-column
        prop="expireDate"
        label="失效日期"
        width="100">
      </el-table-column>
      <el-table-column
        prop="backFlushType"
        label="倒冲时机">
      </el-table-column>
      <el-table-column
        prop="issueScrap"
        label="是否发损耗"
        align="center">
        <template slot-scope="scope">{{ scope.row.issueScrap?'是':'否' }}</template>
      </el-table-column>
      <el-table-column
        prop="keyComponent"
        label="是否关键件"
        align="center">
        <template slot-scope="scope">{{ scope.row.keyComponent?'是':'否' }}</template>
      </el-table-column>
      <el-table-column
        prop="specification"
        label="规格"
        header-align="center"
        width="300">
        <template slot-scope="scope">{{ scope.row.material.specification }}</template>
      </el-table-column>
      <template v-if = "sUser === 'admin'">
        <el-table-column
          prop="price"
          label="单价"
          align="center">
          <template slot-scope="scope">{{ scope.row.material.price }}</template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          align="center">
        </el-table-column>
      </template>
      <el-table-column
        prop="positionNo"
        label="位置号"
        width="300">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import winSions from "@/lib/findDimensions";
import myServer from '@/api/index.js';
import { mapGetters } from 'vuex';
  export default {
    name: "bomTreeChild"
    ,props:{
        code:{
            type:String
            ,default:""
        }
    }
    ,data(){
      return {
          aTableData:[]
          ,winSions:winSions
          ,bomTreeChildCode:{}
          ,oNewData: {}
          ,loading:false
      }
    }
    ,computed:{
        ...mapGetters({
          sUser:"sUser"
        })
    }
    ,watch:{
        code(newVal){
            let t = this;
            t.getTableData();
        }
    }
    ,created(){
        let t = this;
    }
    ,methods:{
         getTableData(){
            let t = this;
            let oPostData = {materialCode:t.code};
            if(t.sUser === 'admin'){
              oPostData.u = t.sUser;
            }
            t.loading = true;
            myServer.v(this);
            myServer.bomTree.bomTreeChildCode({
                data:oPostData
                ,success:function(data){
                    if(Object.keys(t.bomTreeChildCode.ext).length){
                        t.oNewData = t.formatData(t.bomTreeChildCode.ext);
                    }else{
                        t.oNewData = {};
                    }
                    t.loading = false;
                }
            });   
         }
        // 当某一行被点击时会触发该事件
         ,onRowClick(row){
            let t = this;
            t.$refs.bomTreeChild.toggleRowExpansion(row);
         }
        ,formatDataOld(oldData,level = 0){
            let t = this;
           if(oldData.childs&&oldData.childs.length){
               level = level+1;
               oldData.childs.forEach( oChild => {
                   let oNewChild = {level:level};
                   for(let i in oChild){
                       if(i!='childs'){
                        oNewChild[i] = oChild[i];
                       }
                   }
                   t.aTableData.push(oNewChild);
                   t.formatData(oChild,level);
               })
           }
        }
        ,formatData(oldData,level = 0,fid = 0){
            let t = this;
           if(oldData.childs&&oldData.childs.length){
                level = level+1;
               oldData.childs = oldData.childs.map( (oChild,idx) => {
                    oChild.level = level;
                    oChild.id = fid?parseInt(fid+''+(idx+1)):parseInt(idx+1);
                    if(oChild.childs&&oChild.childs.length){
                        oChild = t.formatData(oChild,level,oChild.id);
                    }
                    return oChild;
               })    
           }
           return oldData;
        }
    }
  }
</script>

<style scoped>

</style>
